<template>
	<!-- 补充（编辑页面） -->
	<view class="wrap">
		<view class="edit-item">
			<view style="width: 100rpx;">文字：</view>
			<u-input v-model="additionText" type="text" :border="border" />
		</view>
		<u-line></u-line>
		<view class="edit-pics">
			<view>拍照：</view>
			<view class="pics">
				<view  v-for="(item,index) in picList" :key="index">
					<grid-pic :imgSrc="item.picUrl" :picType="item.type" @addImg="addImg"></grid-pic>
				</view>
			</view>
		</view>
		<view class="edit-config">
			<view style="display: flex;flex-direction: column;"><text>报修人可见：</text><text>开启后，报修人可以看到您这条补充</text></view>
			<u-switch v-model="visible"></u-switch>
		</view>
		<u-button>确定</u-button>
		<u-popup v-model="actionShow" mode="bottom" height="300rpx">
			<view class="more-action">
				<view class="action-item" @click="chooseImage('camera')">
					<icon-text iconPath="order" :iconPosition="0" iconText="拍照"></icon-text>
				</view>
				<u-line length="100%" style="width: 100%;"></u-line>
				<view class="action-item" @click="chooseImage('album')">
					<icon-text iconPath="order" :iconPosition="0" iconText="本地选择"></icon-text>
				</view>
				<u-divider height="10" bg-color="#f5f5f5" style="width: 100%;"></u-divider>
				<view class="action-item" @click="dismiss">
					取消
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import iconText from '@/components/icon-text.vue'
	import gridPic from '@/components/grid-pic.vue'
	export default{
		components:{
			gridPic,
			iconText
		},
		data(){
			return{
				border:false,
				visible:false,
				actionShow:false,
				additionText:'',picList:[
					{
						picUrl:'',
						type:1  
					},
				]
			}
		},
		methods:{
			addImg(){
				this.actionShow = true
			},
			dismiss(){
				this.actionShow = false
			},
			chooseImage(sourceType) {
				this.actionShow = false
			      uni.chooseImage({
			        count: this.count,
			        sizeType: ["compressed"], //可以指定是原图还是压缩图，默认二者都有 ['original', 'compressed']
			        sourceType: [sourceType],
			        success: (res) => {
						console.log(res.tempFilePaths)
			           // this.count = this.maxPhotoLen - res.tempFilePaths.length;
			        //   res.tempFilePaths.forEach(async (tempFile) => {
			        //     uploadFile(
			        //         tempFile,
			        //         "imgs/bus/topic",
			        //         (result) => {
			        //           this.photos.push(result);
			        //           console.log("图片上传", this.photos);
			        //         },
			        //         (result) => {
			        //           this.$tips(result);
			        //         }
			        //       );
			        //   })
			        //   this.closePopup();
			        },
			      });
			    },
		}
	}
</script>

<style scoped lang="scss">
	.wrap{
		display: flex;
		flex-direction: column;
		padding: 20rpx;
		.edit-item{
			display: flex;
			flex-direction: row;
			align-items:center;
		}
		.edit-pics{
			display: flex;
			flex-direction: row;
			.pics{
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
			}
		}
		.edit-config{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}
		.more-action{
			height: 100%;
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.action-item{
				width: 100%;
				padding: 30rpx 0;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
			}
		}
	}

</style>
